<template>
  <div id="app">
    <nav v-if="$route.meta.showNav">
      <router-link to="/">推荐</router-link> |
      <router-link to="/hot">热门</router-link> |
      <router-link to="/search">搜索</router-link> |
    </nav>
    <keep-alive>
      <router-view />
    </keep-alive>

    <audio
      :src="currentSongUrl"
      controls
      autoplay
      @play="$store.commit('updatePlaying', { bool: true })"
      @pause="updatePlaying({ bool: false })"
      @durationchange="updateDuration({ dur: $event.target.duration })"
      @timeupdate="updateCurrentTime({ time: $event.target.currentTime })"
    ></audio>
    <CustomPlay />
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import CustomPlay from "@/components/CustomPlay.vue";
export default {
  components: {
    CustomPlay,
  },
  computed: {
    ...mapGetters(["currentSongUrl"]),
    ...mapState(["fav", "currentSong"]),
  },
  methods: {
    ...mapMutations(["updatePlaying", "updateDuration", "updateCurrentTime"]),
  },
  watch: {
    fav: function (n) {
      window.localStorage.setItem("fav", JSON.stringify(n));
    },
    currentSong: function (n) {
      window.localStorage.setItem("currentSong", JSON.stringify(n));
    },
  },
};
</script>


<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: #2c3e50;
}

nav {
  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
